<html>
<head>
<title>day08-作业-汽车之家-排行榜.ets</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
.s0 { color: #a9b7c6;}
.s1 { color: #faa23d;}
.s2 { color: #e2da90;}
.s3 { color: #aa7dfc;}
.s4 { color: #bbb529;}
.s5 { color: #52cb54;}
.s6 { color: #db7e9b;}
.s7 { color: #b3e54c;}
</style>
</head>
<body bgcolor="#2b2b2b">
<table CELLSPACING=0 CELLPADDING=5 COLS=1 WIDTH="100%" BGCOLOR="#606060" >
<tr><td><center>
<font face="Arial, Helvetica" color="#000000">
day08-作业-汽车之家-排行榜.ets</font>
</center></td></tr></table>
<pre><span class="s0">import </span><span class="s1">{ </span><span class="s0">branchFilter</span><span class="s2">, </span><span class="s0">heroList</span><span class="s2">, </span><span class="s0">Hero </span><span class="s1">} </span><span class="s0">from </span><span class="s3">'../data/HeroData'</span>

<span class="s4">@</span><span class="s0">Entry</span>
<span class="s4">@</span><span class="s0">Component</span>
<span class="s0">struct Page09_heroFilter </span><span class="s1">{</span>
  <span class="s5">// 分路数组</span>
  <span class="s0">branchList</span><span class="s2">: </span><span class="s0">string </span><span class="s6">[] </span><span class="s2">= </span><span class="s0">branchFilter</span><span class="s2">.</span><span class="s0">split</span><span class="s6">(</span><span class="s3">'|'</span><span class="s6">)</span>
    <span class="s2">.</span><span class="s0">map</span><span class="s6">(</span><span class="s0">item </span><span class="s2">=&gt; </span><span class="s0">item</span><span class="s2">.</span><span class="s0">trim</span><span class="s6">())</span>
  <span class="s5">// 选中的筛选条件</span>
  <span class="s4">@</span><span class="s0">State selectedIndex</span><span class="s2">: </span><span class="s0">number </span><span class="s2">= </span><span class="s7">0</span>
  <span class="s5">// 渲染用的数组</span>
  <span class="s4">@</span><span class="s0">State heroList</span><span class="s2">: </span><span class="s0">Hero</span><span class="s6">[] </span><span class="s2">= </span><span class="s0">heroList</span>
  <span class="s5">// 当前时间</span>
  <span class="s0">today</span><span class="s2">: </span><span class="s0">string </span><span class="s2">= </span><span class="s0">this</span><span class="s2">.</span><span class="s0">getTody</span><span class="s6">()</span>
  <span class="s5">// 排序条件</span>
  <span class="s0">sortList</span><span class="s2">: </span><span class="s0">string</span><span class="s6">[] </span><span class="s2">= </span><span class="s6">[</span><span class="s3">'热度'</span><span class="s2">, </span><span class="s3">'胜率'</span><span class="s2">, </span><span class="s3">'登场率'</span><span class="s2">, </span><span class="s3">'Ban率'</span><span class="s6">]</span>
  <span class="s5">//排序高亮渲染下标</span>
  <span class="s4">@</span><span class="s0">State selectedIndex1</span><span class="s2">: </span><span class="s0">number </span><span class="s2">= </span><span class="s7">0</span>

  <span class="s5">// 计算当前日期</span>
  <span class="s0">getTody</span><span class="s6">() </span><span class="s1">{</span>
    <span class="s5">// 计算当前日期</span>
    <span class="s0">const date </span><span class="s2">= </span><span class="s0">new Date</span><span class="s6">()</span>
    <span class="s5">// 年月日</span>
    <span class="s0">const year </span><span class="s2">= </span><span class="s0">date</span><span class="s2">.</span><span class="s0">getFullYear</span><span class="s6">()</span>
    <span class="s0">const month </span><span class="s2">= </span><span class="s0">date</span><span class="s2">.</span><span class="s0">getMonth</span><span class="s6">() </span><span class="s2">+ </span><span class="s7">1</span>
    <span class="s0">const day </span><span class="s2">= </span><span class="s0">date</span><span class="s2">.</span><span class="s0">getDate</span><span class="s6">()</span>
    <span class="s0">return </span><span class="s3">`</span><span class="s1">${</span><span class="s0">year</span><span class="s1">}</span><span class="s3">/</span><span class="s1">${</span><span class="s0">month</span><span class="s1">}</span><span class="s3">/</span><span class="s1">${</span><span class="s0">day</span><span class="s1">}</span><span class="s3">`</span>
  <span class="s1">}</span>

  <span class="s0">build</span><span class="s6">() </span><span class="s1">{</span>
    <span class="s0">Column</span><span class="s6">() </span><span class="s1">{</span>
      <span class="s5">// 底部区域</span>
      <span class="s0">Stack</span><span class="s6">(</span><span class="s1">{ </span><span class="s0">alignContent</span><span class="s2">: </span><span class="s0">Alignment</span><span class="s2">.</span><span class="s0">Top </span><span class="s1">}</span><span class="s6">) </span><span class="s1">{</span>
        <span class="s5">// 背景图</span>
        <span class="s0">Image</span><span class="s6">(</span><span class="s0">$r</span><span class="s6">(</span><span class="s3">'app.media.ic_bg_517'</span><span class="s6">))</span>
          <span class="s2">.</span><span class="s0">height</span><span class="s6">(</span><span class="s7">180</span><span class="s6">)</span>
          <span class="s2">.</span><span class="s0">width</span><span class="s6">(</span><span class="s3">'100%'</span><span class="s6">)</span>

        <span class="s5">// 操作栏</span>
        <span class="s0">Stack</span><span class="s6">() </span><span class="s1">{</span>
          <span class="s0">Row</span><span class="s6">() </span><span class="s1">{</span>
            <span class="s5">// 左</span>
            <span class="s0">Image</span><span class="s6">(</span><span class="s0">$r</span><span class="s6">(</span><span class="s3">'app.media.ic_public_arrow_left'</span><span class="s6">))</span>
              <span class="s2">.</span><span class="s0">width</span><span class="s6">(</span><span class="s7">24</span><span class="s6">)</span>
              <span class="s2">.</span><span class="s0">fillColor</span><span class="s6">(</span><span class="s0">Color</span><span class="s2">.</span><span class="s0">White</span><span class="s6">)</span>
            <span class="s5">// 右</span>
            <span class="s0">Row</span><span class="s6">(</span><span class="s1">{ </span><span class="s0">space</span><span class="s2">: </span><span class="s7">10 </span><span class="s1">}</span><span class="s6">) </span><span class="s1">{</span>
              <span class="s0">Image</span><span class="s6">(</span><span class="s0">$r</span><span class="s6">(</span><span class="s3">'app.media.ic_public_question'</span><span class="s6">))</span>
                <span class="s2">.</span><span class="s0">width</span><span class="s6">(</span><span class="s7">24</span><span class="s6">)</span>
                <span class="s2">.</span><span class="s0">fillColor</span><span class="s6">(</span><span class="s0">Color</span><span class="s2">.</span><span class="s0">White</span><span class="s6">)</span>
              <span class="s0">Image</span><span class="s6">(</span><span class="s0">$r</span><span class="s6">(</span><span class="s3">'app.media.ic_public_share'</span><span class="s6">))</span>
                <span class="s2">.</span><span class="s0">width</span><span class="s6">(</span><span class="s7">24</span><span class="s6">)</span>
                <span class="s2">.</span><span class="s0">fillColor</span><span class="s6">(</span><span class="s0">Color</span><span class="s2">.</span><span class="s0">White</span><span class="s6">)</span>
            <span class="s1">}</span>
          <span class="s1">}</span>
          <span class="s2">.</span><span class="s0">width</span><span class="s6">(</span><span class="s3">'100%'</span><span class="s6">)</span>
          <span class="s2">.</span><span class="s0">justifyContent</span><span class="s6">(</span><span class="s0">FlexAlign</span><span class="s2">.</span><span class="s0">SpaceBetween</span><span class="s6">)</span>

          <span class="s5">// 中间文本</span>
          <span class="s0">Column</span><span class="s6">() </span><span class="s1">{</span>
            <span class="s0">Row</span><span class="s6">() </span><span class="s1">{</span>
              <span class="s0">Text</span><span class="s6">(</span><span class="s3">'英雄热度榜'</span><span class="s6">)</span>
                <span class="s2">.</span><span class="s0">fontColor</span><span class="s6">(</span><span class="s0">Color</span><span class="s2">.</span><span class="s0">White</span><span class="s6">)</span>
              <span class="s0">Image</span><span class="s6">(</span><span class="s0">$r</span><span class="s6">(</span><span class="s3">'app.media.ic_public_arrow_down'</span><span class="s6">))</span>
                <span class="s2">.</span><span class="s0">width</span><span class="s6">(</span><span class="s7">20</span><span class="s6">)</span>
                <span class="s2">.</span><span class="s0">fillColor</span><span class="s6">(</span><span class="s0">Color</span><span class="s2">.</span><span class="s0">White</span><span class="s6">)</span>
            <span class="s1">}</span>

            <span class="s0">Row</span><span class="s6">(</span><span class="s1">{ </span><span class="s0">space</span><span class="s2">: </span><span class="s7">5 </span><span class="s1">}</span><span class="s6">) </span><span class="s1">{</span>
              <span class="s0">Text</span><span class="s6">(</span><span class="s3">'更新时间:' </span><span class="s2">+ </span><span class="s0">this</span><span class="s2">.</span><span class="s0">today</span><span class="s6">)</span>
                <span class="s2">.</span><span class="s0">fontColor</span><span class="s6">(</span><span class="s0">Color</span><span class="s2">.</span><span class="s0">White</span><span class="s6">)</span>
                <span class="s2">.</span><span class="s0">fontSize</span><span class="s6">(</span><span class="s7">10</span><span class="s6">)</span>
              <span class="s0">Text</span><span class="s6">(</span><span class="s3">'算法测试中'</span><span class="s6">)</span>
                <span class="s2">.</span><span class="s0">fontColor</span><span class="s6">(</span><span class="s0">Color</span><span class="s2">.</span><span class="s0">White</span><span class="s6">)</span>
                <span class="s2">.</span><span class="s0">fontSize</span><span class="s6">(</span><span class="s7">9</span><span class="s6">)</span>
                <span class="s2">.</span><span class="s0">backgroundColor</span><span class="s6">(</span><span class="s3">'37bdee'</span><span class="s6">)</span>
                <span class="s2">.</span><span class="s0">padding</span><span class="s6">(</span><span class="s7">1</span><span class="s6">)</span>
                <span class="s2">.</span><span class="s0">borderRadius</span><span class="s6">(</span><span class="s1">{ </span><span class="s0">topLeft</span><span class="s2">: </span><span class="s7">6</span><span class="s2">, </span><span class="s0">bottomRight</span><span class="s2">: </span><span class="s7">6 </span><span class="s1">}</span><span class="s6">)</span>
            <span class="s1">}</span>
          <span class="s1">}</span>
          <span class="s2">.</span><span class="s0">layoutWeight</span><span class="s6">(</span><span class="s7">1</span><span class="s6">)</span>
        <span class="s1">}</span>
        <span class="s2">.</span><span class="s0">padding</span><span class="s6">(</span><span class="s1">{ </span><span class="s0">top</span><span class="s2">: </span><span class="s7">10</span><span class="s2">, </span><span class="s0">left</span><span class="s2">: </span><span class="s7">10</span><span class="s2">, </span><span class="s0">right</span><span class="s2">: </span><span class="s7">10 </span><span class="s1">}</span><span class="s6">)</span>
        <span class="s2">.</span><span class="s0">zIndex</span><span class="s6">(</span><span class="s7">2</span><span class="s6">)</span>
        <span class="s2">.</span><span class="s0">height</span><span class="s6">(</span><span class="s7">55</span><span class="s6">)</span>
        <span class="s2">.</span><span class="s0">backgroundColor</span><span class="s6">(</span><span class="s3">`rgba(0, 0, 0, 0.2)`</span><span class="s6">)</span>
      <span class="s1">}</span>

      <span class="s5">// 筛选区域</span>
      <span class="s5">// 段位筛选 tabFilter</span>
      <span class="s0">List</span><span class="s6">(</span><span class="s1">{ </span><span class="s0">space</span><span class="s2">: </span><span class="s7">25 </span><span class="s1">}</span><span class="s6">) </span><span class="s1">{</span>
        <span class="s0">ForEach</span><span class="s6">(</span><span class="s0">this</span><span class="s2">.</span><span class="s0">branchList</span><span class="s2">, </span><span class="s6">(</span><span class="s0">item</span><span class="s2">: </span><span class="s0">string</span><span class="s2">, </span><span class="s0">index</span><span class="s2">: </span><span class="s0">number</span><span class="s6">) </span><span class="s2">=&gt; </span><span class="s1">{</span>
          <span class="s0">ListItem</span><span class="s6">() </span><span class="s1">{</span>
            <span class="s0">Stack</span><span class="s6">(</span><span class="s1">{ </span><span class="s0">alignContent</span><span class="s2">: </span><span class="s0">Alignment</span><span class="s2">.</span><span class="s0">Bottom </span><span class="s1">}</span><span class="s6">) </span><span class="s1">{</span>
              <span class="s0">Text</span><span class="s6">(</span><span class="s0">item</span><span class="s6">)</span>
                <span class="s2">.</span><span class="s0">height</span><span class="s6">(</span><span class="s7">40</span><span class="s6">)</span>
                <span class="s2">.</span><span class="s0">padding</span><span class="s6">(</span><span class="s7">10</span><span class="s6">)</span>
                <span class="s2">.</span><span class="s0">fontSize</span><span class="s6">(</span><span class="s7">16</span><span class="s6">)</span>
                <span class="s2">.</span><span class="s0">fontColor</span><span class="s6">(</span><span class="s0">this</span><span class="s2">.</span><span class="s0">selectedIndex </span><span class="s2">== </span><span class="s0">index </span><span class="s2">? </span><span class="s0">Color</span><span class="s2">.</span><span class="s0">Black </span><span class="s2">: </span><span class="s3">'#aab1b4'</span><span class="s6">) </span><span class="s5">//  默认'#aab1b4'/ 高亮 black</span>
              <span class="s5">// 底部的横线 高亮时显示，反之隐藏</span>
              <span class="s0">if </span><span class="s6">(</span><span class="s0">this</span><span class="s2">.</span><span class="s0">selectedIndex </span><span class="s2">== </span><span class="s0">index</span><span class="s6">) </span><span class="s1">{</span>
                <span class="s0">Text</span><span class="s6">()</span>
                  <span class="s2">.</span><span class="s0">height</span><span class="s6">(</span><span class="s7">4</span><span class="s6">)</span>
                  <span class="s2">.</span><span class="s0">width</span><span class="s6">(</span><span class="s7">20</span><span class="s6">)</span>
                  <span class="s2">.</span><span class="s0">borderRadius</span><span class="s6">(</span><span class="s7">2</span><span class="s6">)</span>
                  <span class="s2">.</span><span class="s0">backgroundColor</span><span class="s6">(</span><span class="s0">Color</span><span class="s2">.</span><span class="s0">Orange</span><span class="s6">)</span>
              <span class="s1">}</span>

            <span class="s1">}</span>
            <span class="s2">.</span><span class="s0">height</span><span class="s6">(</span><span class="s7">40</span><span class="s6">)</span>
          <span class="s1">}</span>
          <span class="s2">.</span><span class="s0">onClick</span><span class="s6">(() </span><span class="s2">=&gt; </span><span class="s1">{</span>
            <span class="s0">this</span><span class="s2">.</span><span class="s0">selectedIndex </span><span class="s2">= </span><span class="s0">index</span>
            <span class="s5">//第一步，通过渲染下标，获取名称，通过名称来分组</span>
            <span class="s0">const branchLsit1 </span><span class="s2">= </span><span class="s0">this</span><span class="s2">.</span><span class="s0">branchList</span><span class="s6">[</span><span class="s0">index</span><span class="s6">]</span>
            <span class="s5">//第二部，传入名称，用户点击那个名称分路，就把对应的英雄筛选出来</span>
            <span class="s0">this</span><span class="s2">.</span><span class="s0">heroList </span><span class="s2">= </span><span class="s0">heroList</span><span class="s2">.</span><span class="s0">filter</span><span class="s6">((</span><span class="s0">item</span><span class="s6">) </span><span class="s2">=&gt; </span><span class="s1">{</span>
              <span class="s5">//第三步判断，如果用户点的是全部分路。后面的不执行，默认也是全部分路</span>
              <span class="s0">if </span><span class="s6">(</span><span class="s0">branchLsit1 </span><span class="s2">== </span><span class="s3">'全部分路'</span><span class="s6">) </span><span class="s1">{</span>
                <span class="s0">return true </span><span class="s5">//不执行后面代码.</span>
              <span class="s1">}</span>
              <span class="s0">return item</span><span class="s2">.</span><span class="s0">branchRoads</span><span class="s2">.</span><span class="s0">indexOf</span><span class="s6">(</span><span class="s0">branchLsit1</span><span class="s6">) </span><span class="s2">!== -</span><span class="s7">1</span>
            <span class="s1">}</span><span class="s6">)</span>
          <span class="s1">}</span><span class="s6">)</span>
        <span class="s1">}</span><span class="s6">)</span>
      <span class="s1">}</span>
      <span class="s2">.</span><span class="s0">listDirection</span><span class="s6">(</span><span class="s0">Axis</span><span class="s2">.</span><span class="s0">Horizontal</span><span class="s6">)</span>
      <span class="s2">.</span><span class="s0">scrollBar</span><span class="s6">(</span><span class="s0">BarState</span><span class="s2">.</span><span class="s0">Off</span><span class="s6">)</span>
      <span class="s2">.</span><span class="s0">width</span><span class="s6">(</span><span class="s3">'100%'</span><span class="s6">)</span>
      <span class="s2">.</span><span class="s0">height</span><span class="s6">(</span><span class="s7">50</span><span class="s6">)</span>

      <span class="s5">// 英雄列表</span>
      <span class="s0">Column</span><span class="s6">() </span><span class="s1">{</span>
        <span class="s5">// 顶部区域</span>
        <span class="s0">Row</span><span class="s6">() </span><span class="s1">{</span>
          <span class="s0">Text</span><span class="s6">(</span><span class="s3">'英雄'</span><span class="s6">)</span>
            <span class="s2">.</span><span class="s0">fontWeight</span><span class="s6">(</span><span class="s7">900</span><span class="s6">)</span>
            <span class="s2">.</span><span class="s0">layoutWeight</span><span class="s6">(</span><span class="s7">1</span><span class="s6">)</span>
          <span class="s0">Row</span><span class="s6">(</span><span class="s1">{ </span><span class="s0">space</span><span class="s2">: </span><span class="s7">13 </span><span class="s1">}</span><span class="s6">) </span><span class="s1">{</span>
            <span class="s0">ForEach</span><span class="s6">(</span><span class="s0">this</span><span class="s2">.</span><span class="s0">sortList</span><span class="s2">, </span><span class="s6">(</span><span class="s0">item</span><span class="s2">: </span><span class="s0">string</span><span class="s2">, </span><span class="s0">index</span><span class="s2">: </span><span class="s0">number</span><span class="s6">) </span><span class="s2">=&gt; </span><span class="s1">{</span>
              <span class="s0">Text</span><span class="s6">(</span><span class="s0">item</span><span class="s6">)</span>
                <span class="s2">.</span><span class="s0">fontWeight</span><span class="s6">(</span><span class="s7">900</span><span class="s6">)</span>
                <span class="s2">.</span><span class="s0">fontColor</span><span class="s6">(</span><span class="s0">this</span><span class="s2">.</span><span class="s0">selectedIndex1 </span><span class="s2">== </span><span class="s0">index </span><span class="s2">? </span><span class="s3">'#37bdee' </span><span class="s2">: </span><span class="s0">Color</span><span class="s2">.</span><span class="s0">Black</span><span class="s6">)</span><span class="s5">// 高亮 #37bdee 默认 Color.Black</span>
                  <span class="s5">// .onAppear(() =&gt; {</span>
                  <span class="s5">//   this.heroList.sort((a, b) =&gt; {</span>
                  <span class="s5">//     const aNUm = Number(a.tRank.slice(1))</span>
                  <span class="s5">//     const bNUm = Number(b.tRank.slice(1))</span>
                  <span class="s5">//     return bNUm - aNUm</span>
                  <span class="s5">//   })</span>
                  <span class="s5">//</span>
                  <span class="s5">// })</span>
                <span class="s2">.</span><span class="s0">onClick</span><span class="s6">(() </span><span class="s2">=&gt; </span><span class="s1">{</span>
                  <span class="s0">this</span><span class="s2">.</span><span class="s0">selectedIndex1 </span><span class="s2">= </span><span class="s0">index</span>
                  <span class="s0">this</span><span class="s2">.</span><span class="s0">heroList</span><span class="s2">.</span><span class="s0">sort</span><span class="s6">((</span><span class="s0">a</span><span class="s2">, </span><span class="s0">b</span><span class="s6">) </span><span class="s2">=&gt; </span><span class="s1">{</span>
                    <span class="s0">switch </span><span class="s6">(</span><span class="s0">this</span><span class="s2">.</span><span class="s0">selectedIndex1</span><span class="s6">) </span><span class="s1">{</span>
                      <span class="s0">case </span><span class="s7">0</span><span class="s2">:</span>
                        <span class="s0">return b</span><span class="s2">.</span><span class="s0">orderNum </span><span class="s2">- </span><span class="s0">a</span><span class="s2">.</span><span class="s0">orderNum</span>
                      <span class="s0">case </span><span class="s7">1</span><span class="s2">:</span>
                        <span class="s0">return a</span><span class="s2">.</span><span class="s0">winRate </span><span class="s2">* </span><span class="s7">1000 </span><span class="s2">- </span><span class="s0">b</span><span class="s2">.</span><span class="s0">winRate </span><span class="s2">* </span><span class="s7">1000</span>
                      <span class="s0">case </span><span class="s7">2</span><span class="s2">:</span>
                        <span class="s0">return a</span><span class="s2">.</span><span class="s0">showRate </span><span class="s2">* </span><span class="s7">1000 </span><span class="s2">- </span><span class="s0">b</span><span class="s2">.</span><span class="s0">showRate </span><span class="s2">* </span><span class="s7">1000</span>
                      <span class="s0">case </span><span class="s7">3</span><span class="s2">:</span>
                        <span class="s0">return a</span><span class="s2">.</span><span class="s0">banRate </span><span class="s2">* </span><span class="s7">1000 </span><span class="s2">- </span><span class="s0">a</span><span class="s2">.</span><span class="s0">banRate </span><span class="s2">* </span><span class="s7">1000</span>
                      <span class="s0">default</span><span class="s2">:</span>
                        <span class="s0">return </span><span class="s7">0</span>
                    <span class="s1">}</span>
                  <span class="s1">}</span><span class="s6">)</span>
                <span class="s1">}</span><span class="s6">)</span>
            <span class="s1">}</span><span class="s6">)</span>
          <span class="s1">}</span>
        <span class="s1">}</span>
        <span class="s2">.</span><span class="s0">width</span><span class="s6">(</span><span class="s3">'100%'</span><span class="s6">)</span>
        <span class="s2">.</span><span class="s0">padding</span><span class="s6">(</span><span class="s7">10</span><span class="s6">)</span>

        <span class="s5">// 列表区域</span>
        <span class="s0">List</span><span class="s6">() </span><span class="s1">{</span>
          <span class="s0">ForEach</span><span class="s6">(</span><span class="s0">this</span><span class="s2">.</span><span class="s0">heroList</span><span class="s2">, </span><span class="s6">(</span><span class="s0">item</span><span class="s2">: </span><span class="s0">Hero</span><span class="s2">, </span><span class="s0">index1</span><span class="s2">: </span><span class="s0">number</span><span class="s6">) </span><span class="s2">=&gt; </span><span class="s1">{</span>
            <span class="s0">ListItem</span><span class="s6">() </span><span class="s1">{</span>
              <span class="s0">Row</span><span class="s6">(</span><span class="s1">{ </span><span class="s0">space</span><span class="s2">: </span><span class="s7">14 </span><span class="s1">}</span><span class="s6">) </span><span class="s1">{</span>
                <span class="s5">// 头像</span>
                <span class="s0">Image</span><span class="s6">(</span><span class="s0">item</span><span class="s2">.</span><span class="s0">heroIcon</span><span class="s6">)</span>
                  <span class="s2">.</span><span class="s0">width</span><span class="s6">(</span><span class="s7">40</span><span class="s6">)</span>
                  <span class="s2">.</span><span class="s0">borderRadius</span><span class="s6">(</span><span class="s7">10</span><span class="s6">)</span>
                <span class="s5">// 昵称+分类</span>
                <span class="s0">Column</span><span class="s6">(</span><span class="s1">{ </span><span class="s0">space</span><span class="s2">: </span><span class="s7">5 </span><span class="s1">}</span><span class="s6">) </span><span class="s1">{</span>
                  <span class="s0">Text</span><span class="s6">(</span><span class="s0">item</span><span class="s2">.</span><span class="s0">heroName</span><span class="s6">)</span>
                  <span class="s0">Text</span><span class="s6">(</span><span class="s0">item</span><span class="s2">.</span><span class="s0">heroCareer</span><span class="s6">)</span>
                    <span class="s2">.</span><span class="s0">fontSize</span><span class="s6">(</span><span class="s7">10</span><span class="s6">)</span>
                    <span class="s2">.</span><span class="s0">fontColor</span><span class="s6">(</span><span class="s0">Color</span><span class="s2">.</span><span class="s0">Gray</span><span class="s6">)</span>
                <span class="s1">}</span>
                <span class="s2">.</span><span class="s0">width</span><span class="s6">(</span><span class="s7">85</span><span class="s6">)</span>
                <span class="s2">.</span><span class="s0">alignItems</span><span class="s6">(</span><span class="s0">HorizontalAlign</span><span class="s2">.</span><span class="s0">Start</span><span class="s6">)</span>

                <span class="s5">// 热度 胜率 登场率 Ban 率</span>
                <span class="s0">Text</span><span class="s6">(</span><span class="s0">item</span><span class="s2">.</span><span class="s0">tRank</span><span class="s2">.</span><span class="s0">toUpperCase</span><span class="s6">())</span>
                  <span class="s2">.</span><span class="s0">fontWeight</span><span class="s6">(</span><span class="s7">900</span><span class="s6">)</span>
                  <span class="s2">.</span><span class="s0">fontColor</span><span class="s6">(</span><span class="s0">this</span><span class="s2">.</span><span class="s0">selectedIndex1 </span><span class="s2">== </span><span class="s7">0 </span><span class="s2">? </span><span class="s3">'#37bdee' </span><span class="s2">: </span><span class="s0">Color</span><span class="s2">.</span><span class="s0">Black</span><span class="s6">) </span><span class="s5">// 高亮 '#37bdee' 默认 Color.Black</span>
                <span class="s0">Text</span><span class="s6">((</span><span class="s0">item</span><span class="s2">.</span><span class="s0">winRate </span><span class="s2">* </span><span class="s7">100</span><span class="s6">)</span><span class="s2">.</span><span class="s0">toFixed</span><span class="s6">(</span><span class="s7">1</span><span class="s6">)</span>
                  <span class="s2">.</span><span class="s0">toString</span><span class="s6">() </span><span class="s2">+ </span><span class="s3">'%'</span><span class="s6">)</span>
                  <span class="s2">.</span><span class="s0">width</span><span class="s6">(</span><span class="s7">45</span><span class="s6">)</span>
                  <span class="s2">.</span><span class="s0">fontSize</span><span class="s6">(</span><span class="s7">15</span><span class="s6">)</span>
                  <span class="s2">.</span><span class="s0">fontColor</span><span class="s6">(</span><span class="s0">this</span><span class="s2">.</span><span class="s0">selectedIndex1 </span><span class="s2">== </span><span class="s7">1 </span><span class="s2">? </span><span class="s3">'#37bdee' </span><span class="s2">: </span><span class="s0">Color</span><span class="s2">.</span><span class="s0">Black</span><span class="s6">) </span><span class="s5">// 高亮'#37bdee' 默认 Color.Black</span>
                <span class="s0">Text</span><span class="s6">((</span><span class="s0">item</span><span class="s2">.</span><span class="s0">showRate </span><span class="s2">* </span><span class="s7">100</span><span class="s6">)</span><span class="s2">.</span><span class="s0">toFixed</span><span class="s6">(</span><span class="s7">1</span><span class="s6">)</span>
                  <span class="s2">.</span><span class="s0">toString</span><span class="s6">() </span><span class="s2">+ </span><span class="s3">'%'</span><span class="s6">)</span>
                  <span class="s2">.</span><span class="s0">width</span><span class="s6">(</span><span class="s7">45</span><span class="s6">)</span>
                  <span class="s2">.</span><span class="s0">fontSize</span><span class="s6">(</span><span class="s7">15</span><span class="s6">)</span>
                  <span class="s2">.</span><span class="s0">fontColor</span><span class="s6">(</span><span class="s0">this</span><span class="s2">.</span><span class="s0">selectedIndex1 </span><span class="s2">== </span><span class="s7">2 </span><span class="s2">? </span><span class="s3">'#37bdee' </span><span class="s2">: </span><span class="s0">Color</span><span class="s2">.</span><span class="s0">Black</span><span class="s6">) </span><span class="s5">// 高亮'#37bdee' 默认 Color.Black</span>
                <span class="s0">Text</span><span class="s6">((</span><span class="s0">item</span><span class="s2">.</span><span class="s0">banRate </span><span class="s2">* </span><span class="s7">100</span><span class="s6">)</span><span class="s2">.</span><span class="s0">toFixed</span><span class="s6">(</span><span class="s7">1</span><span class="s6">)</span>
                  <span class="s2">.</span><span class="s0">toString</span><span class="s6">() </span><span class="s2">+ </span><span class="s3">'%'</span><span class="s6">)</span>
                  <span class="s2">.</span><span class="s0">width</span><span class="s6">(</span><span class="s7">45</span><span class="s6">)</span>
                  <span class="s2">.</span><span class="s0">fontSize</span><span class="s6">(</span><span class="s7">15</span><span class="s6">)</span>
                  <span class="s2">.</span><span class="s0">fontColor</span><span class="s6">(</span><span class="s0">this</span><span class="s2">.</span><span class="s0">selectedIndex1 </span><span class="s2">== </span><span class="s7">3 </span><span class="s2">? </span><span class="s3">'#37bdee' </span><span class="s2">: </span><span class="s0">Color</span><span class="s2">.</span><span class="s0">Black</span><span class="s6">) </span><span class="s5">// 高亮'#37bdee' 默认 Color.Black</span>
              <span class="s1">}</span>
              <span class="s2">.</span><span class="s0">width</span><span class="s6">(</span><span class="s3">'100%'</span><span class="s6">)</span>
            <span class="s1">}</span>
            <span class="s2">.</span><span class="s0">padding</span><span class="s6">(</span><span class="s7">10</span><span class="s6">)</span>
            <span class="s2">.</span><span class="s0">height</span><span class="s6">(</span><span class="s7">60</span><span class="s6">)</span>

          <span class="s1">}</span><span class="s6">)</span>


        <span class="s1">}</span>
        <span class="s2">.</span><span class="s0">layoutWeight</span><span class="s6">(</span><span class="s7">1</span><span class="s6">)</span>
      <span class="s1">}</span>
      <span class="s2">.</span><span class="s0">layoutWeight</span><span class="s6">(</span><span class="s7">1</span><span class="s6">)</span>

    <span class="s1">}</span>
    <span class="s2">.</span><span class="s0">width</span><span class="s6">(</span><span class="s3">'100%'</span><span class="s6">)</span>
    <span class="s2">.</span><span class="s0">height</span><span class="s6">(</span><span class="s3">'100%'</span><span class="s6">)</span>
  <span class="s1">}</span>
<span class="s1">}</span></pre>
</body>
</html>